<script setup>
  import {ref, watch} from 'vue'

  // 普通数据演示监听和立即执行
  const count = ref(0)

  setTimeout(() => {
    count.value ++
  }, 2000);

  // 第一个参数是监听的数据
  // 第二个是回调函数
  // 第三个参数是一个对象,里面可以增加其他配置如深度监听和默认立即执行
  watch(count, (newVal, oldVal) => {
    console.log('count 发生了变化', newVal, oldVal);
  }, {
    // 页面进入立即执行
    immediate: true
  })

  // ------------
  // 学生对象演示深度监听
  const student = ref({
    name: 'tom',
    age: 17
  })

  setTimeout(() => {
    console.log('setTimeout 已经执行');
    // 深度监听时才监听得到
    student.value.age ++
  }, 1000);

  watch(student, () => {
    console.log('学生发生了变化', student.value.name, student.value.age);
  }, {
    // 深度监听
    deep: true
  })
</script>

<template>
  <div>
    {{ count }}
  </div>
</template>